<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <!-- 
            <script defer src="1.js"></script>2M 下载顺序3 defer导致执行顺序按标签顺序
            <script defer src="2.js"></script>1M 下载顺序2
            <script defer src="3.js"></script>0.5M 下载顺序1
     -->
    <script defer src="./js/common.js"></script>
    <script defer src="./js/1.js"></script>

</head>

<body>
    <script>
        // onload 页面的所有资源都现在并执行完成后  
        // window > document   事件  

        // window.onload = function() {
        //     console.log('123');
        // }

        window.addEventListener('load', () => {
            console.log('load');
        })
        // 事件 是异步的
        window.addEventListener(
            "DOMContentLoaded",
            () => {
                console.log('DOMContentLoaded')
            }
        );
    </script>
</body>

</html>